<template>
	<view class="content">
		<view class="head">
			<view class="head_part1"
				:style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/contribution/mycontribution_headPart1@2x.png') + ')' }">
				<view class="view1">可用数字资产</view>
				<view class="contribution_available">{{point}}</view>
				<view class="cumulative_consumption flex-between">
					<view class="cumulative flex-left" @click="$util.redirectTo('/otherpages/member/point/point')">
						<view class="view1">累计数字资产</view>
						<view class="view2">{{tatol}}</view>
					</view>
					<view class="consumption flex-left" @click="$util.redirectTo('/plugpages/consume/order')">
						<view class="view1">进行中数字资产</view>
						<view class="view2">{{expend}}</view>
					</view>
				</view>
			</view>
			<view class="head_part2">
				<view class="part2_content">
					<view class="head_mean">
						<view class="mean_item" v-for="(item,index) in head_imgarr" :key="index"
							@click="$util.redirectTo(item.url)"
							:style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/contribution/'+item.backgroundImage) + ')' }">
							<view class="mean_t">{{item.name}}</view>
							<view class="mean_v flex-left" :class="item.colorName">
								<view class="mean_c1">GO</view>
								<view class="mean_c2">></view>
							</view>
						</view>
					</view>
					<block v-if="bonus_info">
						<image class="hongbao" :src="$util.img(bonus_info.bonus_image)" @click="receiveredenvelope">
						</image>
					</block>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_head1 flex-between">
				<view class="list_head1_v1">
					<view class="view3">数字资产夺宝</view>
					<view class="view4">拼运气 抢好货</view>
				</view>
				<view class="list_head1_v2 flex-left">
					<view class="more" @click="turnindiana">查看更多</view>
					<image class="img" :src="$util.img('/upload/uniapp/contribution/right@2x.png')"></image>
				</view>
			</view>
			<view class="list_content1">
				<block v-if="list1.length > 0">
					<view class="content1" v-for="(item,index) in list1" :key="index" @click="turndetail(item.id)">
						<image :src="item.goods_img"></image>
						<view class="goodsv">
							<view class="goodsname">{{item.goods_name}}</view>
							<view class="goodBut">立即夺宝</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="content1" style="width:100%;padding: 30rpx;text-align: center;">暂无夺宝商品数据</view>
				</block>
			</view>
			<view class="lise_head2 flex-between">
				<view class="list_head2_v1">
					<view class="view3">数字资产商城</view>
					<view class="view4">积累数字资产，兑换好物</view>
				</view>
				<view class="list_head1_v2 flex-left">
					<view class="more" @click="turnmall">查看更多</view>
					<image class="img" :src="$util.img('/upload/uniapp/contribution/right@2x.png')"></image>
				</view>
			</view>
			<view class="list_content2">
				<block v-if="list2.length > 0">
					<view class="content2" v-for="(item,index) in list2" :key="index" @click="$util.redirectTo('/promotionpages/point/detail/detail?id='+item.id)">
						<image :src="item.image"></image>
						<view class="goodsview">
							<view class="goodsname">{{item.name}}</view>
							<view class="view7 flex-left">
								<view class="num">{{item.point}}</view>
								<view class="numstysle">数字资产</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="content2" style="width:100%;padding: 30rpx;text-align: center;">暂无可兑换商品数据</view>
				</block>
			</view>
		</view>
		
		<diy-red-packet ref="redPacketVisible"></diy-red-packet>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
<script>
	import AD from './public/js/ad.js';
	import diyRedPacket from './diy/diy-red-packet/diy-red-packet.vue';
	export default {
		components:{
			diyRedPacket
		},
		data() {
			return {
				point: 0, //可用数字资产
				expend: 0, //已消耗数字资产
				tatol: 0, //累计数字资产
				head_imgarr: [{
					name: '数字资产明细',
					backgroundImage: 'mean1@2x.png',
					colorName: 'color1',
					url: '/otherpages/member/point_detail/point_detail'
				}, {
					name: '数字资产夺宝',
					backgroundImage: 'mean2@2x.png',
					colorName: 'color2',
					url: '/promotionpages/contribution/worthtreasure'
				}, {
					name: '数字资产商城',
					backgroundImage: 'mean3@2x.png',
					colorName: 'color3',
					url: '/promotionpages/point/list/list'
				}],
				list1: [],
				list2: [],
				bonus_info: ''
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '我的数字资产'
			})
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.bonus_info = '';
				this.list1 = [];
				this.list2 = [];
				this.getData()
				this.getIndianaData()
				this.getMallData()
				this.getBonusInfo()
			} else {
				this.$util.redirectTo(
					'/otherpages/login/login/login', {
						back: '/promotionpages/contribution/contribution'
					},
					'redirectTo'
				);
			}
		},
		methods: {
			getBonusInfo() {
				this.$api.sendRequest({
					url: '/spread/api/spread/getMemberBonus',
					success: res => {
						if (res.code == 0) {
							this.bonus_info = res.data;
						}
					}
				})
			},
			bonus() {
				this.$api.sendRequest({
					url: '/spread/api/spread/memberBonus',
					success: res => {
						if (res.code == 0) { //分红成功弹窗提示
							let bonus_money = res.data.bonus_money;
							this.$refs.redPacketVisible.show(bonus_money);
							this.bonus_info = '';
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				})
			},
			turnindiana() { //跳转数字资产夺宝界面
				this.$util.redirectTo('/promotionpages/contribution/worthtreasure');
			},
			turnmall() {
				this.$util.redirectTo('/promotionpages/point/list/list')
			},
			receiveredenvelope() {	
				if (this.bonus_info.bonus_adstatus == 0) { //测试环境不看视频领取
					return this.bonus();
				}
				let _this = this;				
				// #ifdef APP-PLUS || MP-WEIXIN
				// 调用后会显示 loading 界面
				AD.show({
					//#ifdef APP-PLUS
					adpid: this.bonus_info.bonus_adpid, // HBuilder 基座测试广告位
					// #endif 		
					//#ifdef MP-WEIXIN
					adUnitId: this.bonus_info.bonus_adunitid,
					// #endif 		
					adType: "RewardedVideo",
					urlCallback: { // 服务器回调透传参数
						userId: 'testuser',
						extra: 'bonus'
					}
					//singleton: false // 设置此参数后，每次调用 show 方法将重新创建广告实例，预载将失效，如果广告回调每次要透传用户信息需要设置 false
				}, (res) => {
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
						// 正常播放结束
						console.log("onClose " + res.isEnded);
						_this.bonus();
					} else {
						// 播放中途退出
						console.log("onClose " + res.isEnded);
						_this.$util.showToast({
							title: '请浏览完视频才可参与分红'
						});
					}
					// 在此处理服务器回调逻辑
				}, (err) => {
					// 广告加载错误
					console.log(err)
					_this.$util.showToast({
						title: '视频加载错误'
					});
				})
				return
				// #endif 		
				this.$util.showToast({
					title: '仅支持APP端和微信小程序端用户参与分红'
				});
			},
			turndetail(id) { //跳转商品详情界面
				this.$util.redirectTo('/promotionpages/contribution/details?id=' + id);
			},
			getData() {
				this.$api.sendRequest({
					url: '/loot/api/Activity/myContributionValue',
					success: res => {
						if (res.code == 0) {
							this.point = res.data.point
							this.expend = res.data.expend
							this.tatol = res.data.tatol
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			getIndianaData() {
				this.$api.sendRequest({
					url: '/loot/api/Activity/getActivityGoodsList',
					data: {
						page: 1,
						page_size: 4
					},
					success: res => {
						if (res.code == 0) {
							let newArr = []
							newArr = res.data.list
							this.list1 = this.list1.concat(newArr)
						}
					},
				});
			},
			getMallData() {
				this.$api.sendRequest({
					url: '/pointexchange/api/goods/page',
					data: {
						page: 1,
						page_size: 4
					},
					success: res => {
						if (res.code == 0) {
							let newArr = []
							newArr = res.data.list
							this.list2 = this.list2.concat(newArr)
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@mixin bgm($imagename) {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// background-image: url('../../common/img/contribution/'+$imagename);
	}

	@mixin flex($jusitify, $align) {
		display: flex;
		justify-content: $jusitify;
		align-items: $align;
	}

	.flex-left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		width: 750rpx;
		min-height: 100vh;

		.head {
			.head_part1 {
				height: 252rpx;
				padding: 48rpx 102rpx 0 48rpx;

				.contribution_available {
					height: 67rpx;
					line-height: 67rpx;
					font-size: 48rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}

				.cumulative_consumption {
					margin-top: 36rpx;
				}
			}

			.head_part2 {
				margin-top: -30rpx;
				// height: 347rpx;
				border-radius: 20rpx 20rpx 0 0;
				background: linear-gradient(360deg, #F8F8F8 0%, #FFFFFF 100%);
				padding: 30rpx 30rpx 0rpx 30rpx;

				.part2_content {
					.head_mean {
						display: flex;
						justify-content: space-around;

						.mean_item {
							width: 216rpx;
							height: 128rpx;
							background-size: 100% 100%;
							background-repeat: no-repeat;

							.mean_t {
								margin-top: 24rpx;
								margin-left: 16rpx;
								height: 40rpx;
								line-height: 40rpx;
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #303133;
							}

							.mean_v {
								margin-top: 8rpx;
								margin-left: 16rpx;
								width: 81rpx;
								height: 32rpx;
								border-radius: 16px;
								display: flex;
								align-items: center;
								justify-content: center;

								.mean_c1 {
									height: 24rpx;
									line-height: 24rpx;
									font-size: 24rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
								}

								.mean_c2 {
									margin-left: 2rpx;
									margin-top: -4rpx;
									height: 26rpx;
									line-height: 26rpx;
									font-size: 24rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
								}

								&.color1 {
									background: linear-gradient(180deg, #CBFFF6 0%, #12D0AE 100%);
								}

								&.color2 {
									background: linear-gradient(180deg, #FFB386 0%, #FE6232 100%);
								}

								&.color3 {
									background: linear-gradient(180deg, #FF8D8C 0%, #FF4544 100%);
								}
							}
						}
					}

					.hongbao {
						margin-top: 14rpx;
						width: 690rpx;
						height: 193rpx;
					}
				}
			}
		}

		.list {
			background: #F8F8F8;
			padding: 0 30rpx 0 30rpx;

			.list_head1 {
				margin-top: 25rpx;

				.list_head1_v1 {
					display: flex;
					align-items: flex-end;
				}
			}

			.list_content1 {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.content1 {
					width: 331rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 24rpx;

					image {
						width: 100%;
						height: 331rpx;
						background: #FF0000;
					}

					.goodsv {
						padding: 18rpx 14rpx 24rpx 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.goodBut {
							margin-top: 24rpx;
							width: 200rpx;
							height: 56rpx;
							background: #FF4544;
							border-radius: 28rpx;
							font-size: 24rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 36px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}

			.lise_head2 {
				.list_head2_v1 {
					display: flex;
					align-items: flex-end;
				}
			}

			.list_content2 {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.content2 {
					width: 331rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 24rpx;

					image {
						width: 100%;
						height: 331rpx;
						background: #FF0000;
					}

					.goodsview {
						padding: 18rpx 14rpx 24rpx 20rpx;

						.view7 {
							margin-top: 24rpx;

							.num {
								height: 50rpx;
								line-height: 50rpx;
								font-size: 36rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #FF4544;
							}

							.numstysle {
								height: 50rpx;
								line-height: 50rpx;
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 500;
								color: #606266;
							}
						}
					}
				}
			}
		}
	}

	.view1 {
		height: 33rpx;
		line-height: 33rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.75);
	}

	.view2 {

		margin-left: 7rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
	}

	.view3 {
		height: 54rpx;
		line-height: 54rpx;
		font-size: 36rpx;
		font-family: SourceHanSansCN-Bold, SourceHanSansCN;
		font-weight: bold;
		color: #303133;
	}

	.view4 {
		margin-left: 20rpx;
		height: 36rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #909399;
	}

	.more {
		height: 30rpx;
		line-height: 36rpx;
		font-size: 24rpx;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #303133;
	}

	.img {
		width: 34rpx;
		height: 34rpx;
	}

	.goodsname {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #303133;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}
</style>
